<template>
	<view class="update">
		<view class="head">
			头像
			<view class="mesg">
				<image src="../../../static/logo.png" mode=""></image>
				<view style="margin-left: 20rpx;">
					<van-icon name="arrow" size="20" />
				</view>
			</view>
		</view>
		<view class="head" @click="update">
			名字
			<view class="mesg">
				{{people.name | judgeName}}
				<view style="margin-left: 20rpx;">
					<van-icon name="arrow" size="20" />
				</view>
			</view>
		</view>
		<!-- <van-dialog :show="show" title="系统提示" show-cancel-button :beforeClose="chargeBtn">
			
		</van-dialog> -->
		<van-dialog use-slot title="系统提示" :value="show" :show="show" :show-cancel-button="true" bind:cancel="cancel" closeOnClickOverlay>
			<view style="display: flex;flex-direction: column; align-items: center;">
				请输入要修改的名称
				<view class="dialog-inout">
					<input type="text" placeholder="昵称" />
				</view>
			</view>
		</van-dialog>
		<view @click="goUpdatePwd" class="head">
			设置密码
			<view class="mesg">
				<view style="margin-left: 20rpx;">
					<van-icon name="arrow" size="20" />
				</view>
			</view>
		</view>
		<view @click="goUpdatePhone" class="head">
			手机号码
			<view class="mesg">
				{{people.phone}}
				<view style="margin-left: 20rpx;">
					<van-icon name="arrow" size="20" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				people: {
					name: "测试",
					grade: "12",
					phone: "12345678911"
				},
				show: false,
				message: '',
			}
		},
		filters: {
			judgeName(name) {
				return name ? name : "先生"
			}
		},
		methods: {
			update() {
				//当点击按钮时，显示弹出框
				this.show = true;
			},
			cancel() {
				debugger
				this.setData({
					cancel: false
				});
				this.show = false;
			},
			chargeBtn(action, done) { //确认or取消
				if (action === 'cancel') { //取消按钮
					done();
				} else if (action === 'confirm') { //确定按钮
					//向后端传值并关闭dialog弹出框
					this.show = false;
				};
				this.message = '';
				done();
			},
			goUpdatePwd(){
				uni.navigateTo({
					url:"updatePwd"
				})
			},
			goUpdatePhone(){
				uni.navigateTo({
					url:"updatePhone"
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.update {
		background: #d4d4d4;
		height: 100vh;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			font-size: 34rpx;
			border-bottom: solid 1px #cfcfcf;
			background: #FFFFFF;

			.mesg {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 999rpx;
				}
			}
		}
		.dialog-inout{
			padding: 10rpx;
			margin: 40rpx 40rpx 0 40rpx;
			border-radius: 30rpx;
			border: solid 1px #c3c3c3;
		}
	}
</style>
